import * as React from 'react';
import ToolBarStrategy from "./ToolBarStrategy";
import API, {IUpdateArticleText} from '../../../API';
import {ReactMarkDownEditor} from "./ReactMarkDownEditor";
import {ISubListItem} from "../lib/SubListFactory";

export interface IToolBarProps{
    toolBar: ToolBarStrategy
    subMenuList_list:ISubListItem
    markDownEditor: ReactMarkDownEditor
}

export default class ToolBar extends React.Component<IToolBarProps>{
    componentWillMount(){
        this.props.toolBar.plugIn.Submit.settingUp(API.post.uploadArticleText);
    }


    execute = (target:string,data ?: any)=>{
        const tollBar = this.props.toolBar;
        tollBar.plugIn[target].execute(data);
    };

    submitExecute=(target: string, data: IUpdateArticleText)=>{
        const tollBar = this.props.toolBar;
        const {title,content,anthology,author='coffeeCat'} = data;

        console.log('title:',title);
        const id = this.props.subMenuList_list.getStoreIdSelf();
        tollBar.plugIn[target].execute({title,content,anthology,author, id});
    };

    render(){
        const {LayoutExchange, Submit} = this.props.toolBar.plugIn;
        const markDownEditor = this.props.markDownEditor;
        const title = markDownEditor.title;
        const content = markDownEditor.content;
        const anthology = markDownEditor.anthologyTitle;
        return (
            <div className={'editor-tool-bar'}>
                <div className={'editor-tool-item LayoutExchange'}
                     onClick={this.execute.bind(this, 'LayoutExchange')}
                     title={LayoutExchange.title}>&#xe794;</div>
                <div className={'editor-tool-item Submit'}
                     onClick={this.submitExecute.bind(null, 'Submit', {title,content,anthology})}
                     title={Submit.title}>&#xe786;</div>
                <div className={'editor-tool-item'}>&#xe791;</div>
            </div>
        )
    }

}